<template>
  <div>
    <el-button @click="dialogFormRef?.open()">open</el-button>
    <AdDialogForm v-bind="dialogConfig" ref="dialogFormRef" v-model="models"></AdDialogForm>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';

import type { AdDialogFormInstance, AdDialogFormPorps } from '@fe-hl/admin-design-vue';

interface Models {
  topLevelProject: string;
  code: string;
}
const dialogFormRef = ref<AdDialogFormInstance>();

const models = ref<Models>();
const dialogConfig = reactive<AdDialogFormPorps<Models>>({
  dialogProps: {
    title: '新增',
  },
  formPorps: {
    formProps: {
      labelWidth: '80px',
    },
    buttonsSpan: 24,
    buttonsPosition: 'end',
    components: [
      {
        model: 'topLevelProject',
        components: 'el-select',
        subComponents: 'el-option',
        options: [
          {
            label: '项目1',
            value: '1000',
          },
          {
            label: '项目2',
            value: '2000',
          },
        ],
        props: {
          label: '项目名称',
          rules: [{ required: true, message: '请选择项目名称', trigger: ['change'] }],
        },
        events: {
          change: (model: Record<string, any>, data: Record<string, any>) => {
            model.code = data ? data.value : '';
          },
        },
      },
      {
        model: 'code',
        components: 'el-input',
        props: {
          disabled: true,
          label: '项目编码',
        },
      },
    ],
    submit: (models) => {
      // 模拟ajax请求
      console.log(models);
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, 3000);
      });
    },
    resetForm: () => {
      console.log('resetForm');
    },
  },
});
</script>
